<template>
<table class="dataTable table table-bordered table-hover">
    <tr v-for="set in columnsSet">
        <td :class="{'uploadWidth':set.upload || set.checkboxOptions}" v-if="set.edit || set.options || set.datetime || set.textarea || set.upload || set.checkboxOptions || set.img">
            <span class="required" v-if="set.required || required(item.valdate,set.data)">*</span>
            <span class="required" v-else>&nbsp;</span> {{ set.title }}
        </td>
        <td v-if="set.edit || set.options || set.datetime || set.textarea || set.upload || set.checkboxOptions || set.img">
            <input :disabled="set.readonly" v-if="set.edit" type="text" class="form-control" v-model="item[set.data]" name="{{set.data}}" id="{{set.data}}">
            <select class="form-control" v-if="set.options" v-model="item[set.data]" name="{{set.data}}" id="{{set.data}}" :disabled="set.readonly">
                    <option v-for="option in set.options" :value.sync="option.value">{{option.key}}</option>
                </select>
            <textarea :disabled="set.readonly" v-if="set.textarea" type="text" class="form-control" v-model="item[set.data]" name="{{set.data}}" id="{{set.data}}"></textarea>

            <div class="input-append date form_datetime" v-if="set.datetime">
                <input :disabled="set.readonly" type="text" class="form-control" v-model="item[set.data] | updatetime" :value.sync="opValue" name="{{set.data}}" id="{{set.data}}" v-el:datetime readonly>
                <span class="add-on"><i class="icon-th"></i></span>
            </div>
            <!-- <from-file v-if="set.upload" :name="set.data" :edit="true"></from-file> -->
            <img v-if="set.img" :src="item[set.data]" alt="" />
            <file-upload v-if="set.upload" :inputname="set.data" v-ref:file></file-upload>
            <!-- <html-edit v-if="set.htmlEdit" :disabled="set.readonly" v-ref:note :content.sync="htmlContent" height="100" width="100%"></html-edit> -->
            <div class="checkbox-item" v-if="set.checkboxOptions">
                <label v-for="option in set.checkboxOptions" style="margin-right:5px">
                        <input type="checkbox" :disabled="set.readonly" name="{{set.data}}" id="{{set.data}}" :value="option.value" v-model.sync="item[set.data]"/>{{option.key}}
                    </label>
            </div>
        </td>
    </tr>
</table>
</template>

<style scoped>
/*
  .form-inline .btn+.btn {
     margin-right:10px;
  }
  */

</style>

<script>
export default {
    props: {
        item: {
            type: Object,
            default: () => ({})
        },
        columnsSet: {
            type: Array,
            default: () => []
        },
        checkboxValue: {
            type: Array,
            default: () => []
        },
        htmlContent: {
            type: String,
            default: ""
        }
    },
    methods: {
        required(value, data) {
            if (value && value.rules) {
                if (value.rules[data]) {
                    return value.rules[data]["required"] || false;
                } else {
                    return false
                }
            }
        },
    },
    filters: {
        updatetime: {
            write(v) {
                $(this.$els.datetime).valid()
                return v
            },
            read(v) {
                let n = v + "";
                if (n.length == 8 || n.length == 14) {
                    let year = n.substr(0, 4);
                    let month = n.substr(4, 2);
                    let day = n.substr(6, 2);
                    let hour = n.substr(8, 2);
                    let minute = n.substr(10, 2);
                    let second = n.substr(12, 2);
                    if (n.length == 14) {
                        return year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second
                    } else {
                        return year + "-" + month + "-" + day
                    }
                } else {
                    return v
                }

            }
        }
    }
}
</script>
